/**
 *  学习目标：组件生命周期钩子 卸载时
 *    生命周期：
 *      componentWillUnmount
 *    作用：
 *      执行清理工作（比如：清理定时器等）
 */
import React from 'react'

export default class App extends React.Component {
  state = {
    isShow: true,
  }
  render() {
    return (
      <>
        <h1>倒计时效果</h1>
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>挂载卸载倒计时组件</button>
        <hr />
        <hr />
        {this.state.isShow ? <CountDown /> : null}
      </>
    )
  }
}

class CountDown extends React.Component {
  componentDidMount() {
    console.log(1, '组件挂载-componentDidMount')
  }

  componentWillUnmount() {
    console.log(2, '组件卸载-componentWillUnmount')
  }

  render() {
    return (
      <>
        <button>发送验证码组件</button>
      </>
    )
  }
}
